
<ui:composition
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
   
       <div style="width: 100%; ">

           <div style="width: 49%; position: relative; float: left; ">

               <p:dataTable id="tDebitos" paginator="true" rows="5" style="width: 450px;"
                        value="#{cuentaCorrienteBean.debitos}" var="deb"
                        emptyMessage="No se han encontrado debitos pendientes">

                <f:facet name="header">
                    <div class="headerTable">
                         Sus compras pendientes de pago
                    </div>
                </f:facet>

                    <p:column headerText="Documento" style="text-align: center;" >
                        <h:outputText value="#{deb.codComprobante} " />
                        <!--
                        <h:outputText value="" >
                            <f:convertNumber pattern="0000" />
                        </h:outputText>
                        -->
                        <h:outputText value="#{deb.numero}" >
                            <f:convertNumber pattern="-00000000" />
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Vencimiento" style="text-align: center;" >
                        <h:outputText value="#{deb.vencimiento}" >
                            <f:convertDateTime pattern="dd/MM/yyyy" />
                        </h:outputText>

                    </p:column>

                    <p:column headerText="Pendiente" style="text-align: right;" >
                        <h:outputText value="#{deb.pendiente}" >
                            <f:convertNumber pattern="$ #,###,##0.00" />
                        </h:outputText>
                    </p:column>

                </p:dataTable>

           </div>

           <div style="width: 49%; float: right; position: relative; ">

               <p:dataTable id="tCreditos" paginator="true" rows="5" style="width: 450px;"
                        value="#{cuentaCorrienteBean.creditos}" var="cre"
                         emptyMessage="No se han encontrado creditos pendientes">

                <f:facet name="header" >
                   <div class="headerTable">
                         Sus pagos pendientes de cancelar
                   </div>
                </f:facet>

                    <p:column headerText="Documento" style="text-align: center;" >

                        <h:outputText value="#{cre.codComprobante} " />

                        <!--
                        <h:outputText value="#{cre.movimiento.documento.puntoVenta} - #{cre.movimiento.documento.numeroDocumento}" >
                            <f:convertNumber pattern="0000" />
                        </h:outputText>
                        -->
                        <h:outputText value="#{cre.numero}" >
                            <f:convertNumber pattern="-00000000" />
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Vencimiento" style="text-align: center;" >
                        <h:outputText value="#{cre.vencimiento}" >
                             <f:convertDateTime pattern="dd/MM/yyyy" />
                        </h:outputText>
                    </p:column>

                    <p:column headerText="Pendiente" style="text-align: right;" >
                        <h:outputText value="#{cre.pendiente}"  >
                            <f:convertNumber pattern="$ #,###,##0.00" />
                        </h:outputText>
                    </p:column>

                </p:dataTable>

           </div>
       </div>

</ui:composition>
